<script lang="ts">
  import { computed, defineComponent, PropType, ref, watch } from '@vue/composition-api';
  import OtoButton from '@/components/common/oto-button.vue';
  import OtoRadio, { RadioPropsType } from './components/radio.vue';
  import { GENDER, REQUIREMENT } from '@/enum/user';
  import { STUDY_MATCH_CITY, STUDY_MATCH_TARGET } from '@/enum/study-match';
  import { ageData, heightData, SelectDataItem } from '@/constants/data';
  import { getStudyMatchNeed, StudyMatchNeedDto, submitStudyMatchNeed } from '@/api/study-match';
  import { onLoad } from '@/hooks/uniapp-composition-hooks';
  import { Message } from '@/libs';
  import { useRouter } from '@/constants/router';

  type PropsType = {
    list: Array<{ name: string }>;
  };
  export default defineComponent({
    components: {
      OtoButton,
      OtoRadio
    },
    props: {
      list: {
        type: Array as PropType<PropsType['list']>,
        require: true
      }
    },
    setup() {
      const router = useRouter();

      const fitCityList = ref<RadioPropsType['list']>([
        {
          text: STUDY_MATCH_CITY.AS_LONG_AS_THE_COLLEGE,
          value: STUDY_MATCH_CITY.AS_LONG_AS_THE_COLLEGE
        },
        {
          text: STUDY_MATCH_CITY.AS_LONG_AS_THE_CLASSMATE_SCHOOL,
          value: STUDY_MATCH_CITY.AS_LONG_AS_THE_CLASSMATE_SCHOOL
        },
        {
          text: STUDY_MATCH_CITY.ALL,
          value: STUDY_MATCH_CITY.ALL
        }
      ]);

      const genderList = ref<RadioPropsType['list']>([
        {
          text: '小哥哥',
          value: GENDER.BOY
        },
        {
          text: '小姐姐',
          value: GENDER.GIRL
        },
        {
          text: '都可以',
          value: 3
        }
      ]);

      const targetList = ref<RadioPropsType['list']>([
        {
          text: STUDY_MATCH_TARGET.TO_LEARN,
          value: STUDY_MATCH_TARGET.TO_LEARN
        },
        {
          text: STUDY_MATCH_TARGET.TALK_ABLOUT_OBJECT,
          value: STUDY_MATCH_TARGET.TALK_ABLOUT_OBJECT
        },
        {
          text: STUDY_MATCH_TARGET.GET_FRIENDS,
          value: STUDY_MATCH_TARGET.GET_FRIENDS
        },
        {
          text: STUDY_MATCH_TARGET.ALL,
          value: STUDY_MATCH_TARGET.ALL
        }
      ]);

      const form = ref<StudyMatchNeedDto>({
        requirement: REQUIREMENT.NOT_RELAX,
        city: '',
        sex: 0,
        target: '',
        age: '',
        height: ''
      });

      onLoad(() => {
        getStudyMatchNeed().then((res) => {
          if (res.data) {
            form.value = res.data;
          }
        });
      });

      const ageListShow = ref(false);

      const ageList = ref([ageData, ageData]);

      function saveAge(value: [SelectDataItem, SelectDataItem]) {
        console.log(value);
        const arg1 = value[0].value;
        const arg2 = value[1].value;
        if (arg1 > arg2) {
          form.value.age = `${arg2}-${arg1}`;
        } else {
          form.value.age = `${arg1}-${arg2}`;
        }
      }

      const heightListShow = ref(false);

      const heightList = ref([heightData, heightData]);

      function saveHeight(value: [SelectDataItem, SelectDataItem]) {
        console.log(value);
        const arg1 = value[0].value;
        const arg2 = value[1].value;
        if (arg1 > arg2) {
          form.value.height = `${arg2}-${arg1}`;
        } else {
          form.value.height = `${arg1}-${arg2}`;
        }
      }

      const ageCurrentSelectData = computed(() => {
        return form.value.age.split('-').map((item) =>
          ageData.findIndex((ageDataItem) => {
            return ageDataItem.value === Number(item);
          })
        );
      });

      const heightCurrentSelectData = computed(() => {
        return form.value.height.split('-').map((item) =>
          heightData.findIndex((heightDataItem) => {
            return heightDataItem.value === Number(item);
          })
        );
      });

      const relax = ref(false);

      function changeRelax(value: boolean) {
        if (value) {
          form.value.requirement = REQUIREMENT.RELAX;
        } else {
          form.value.requirement = REQUIREMENT.NOT_RELAX;
        }
        // relax.value = value;
      }

      watch(
        () => form.value.requirement,
        (val) => {
          if (val === REQUIREMENT.RELAX) {
            relax.value = true;
          } else {
            relax.value = false;
          }
        }
      );

      function submit() {
        submitStudyMatchNeed(form.value).then(async () => {
          await Message.success('提交成功');
          router.navigateBack({
            delta: 1
          });
        });
      }

      return {
        form,
        fitCityList,
        genderList,
        targetList,
        ageListShow,
        heightListShow,
        ageList,
        heightList,
        ageCurrentSelectData,
        heightCurrentSelectData,
        relax,
        saveAge,
        saveHeight,
        changeRelax,
        submit
      };
    }
  });
</script>
<template>
  <view class="preferences">
    <view class="top">
      <view class="point"></view>
      <view class="text">选你所喜-放宽条件更容易匹配上哦</view>
      <oto-button
        :customStyle="{
          width: '140rpx',
          fontSize: '24rpx',
          marginLeft: '30rpx',
          borderRadius: '12rpx'
        }"
        @click.stop="submit"
      >
        提交报名
      </oto-button>
    </view>
    <view class="form-line fit-relax">
      <view class="title">放宽偏好</view>
      <view class="content fit-relax-content">
        <text class="fit-relax-text">建议打开,只有在没有人的时候才放宽条件</text>
        <u-switch :value="relax" @input="changeRelax"></u-switch>
      </view>
    </view>
    <view class="form-line">
      <view class="title">对方所在城市</view>
      <view class="content">
        <oto-radio v-model="form.city" :list="fitCityList" />
      </view>
    </view>
    <view class="form-line">
      <view class="title">对方性别</view>
      <view class="content">
        <oto-radio v-model="form.sex" :list="genderList" />
      </view>
    </view>
    <view class="form-line">
      <view class="title">希望对方点目的</view>
      <view class="content">
        <oto-radio v-model="form.target" :list="targetList" />
      </view>
    </view>
    <view class="form-line select select-common">
      <view class="title">
        <view class="custom">
          <view>年龄</view>
          <view class="arrow" @click.stop="ageListShow = true">
            {{ form.age || '请选择' }}
          </view>
        </view>
        <u-select
          v-model="ageListShow"
          mode="mutil-column"
          :default-value="ageCurrentSelectData"
          :list="ageList"
          @confirm="saveAge"
        ></u-select>
      </view>
    </view>
    <view class="form-line select-common">
      <view class="title">
        <view class="custom">
          <view>身高（mm）</view>
          <view class="arrow" @click.stop="heightListShow = true">
            {{ form.height || '请选择' }}
          </view></view
        >
        <u-select
          v-model="heightListShow"
          mode="mutil-column"
          :default-value="heightCurrentSelectData"
          :list="heightList"
          @confirm="saveHeight"
        ></u-select>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
  .preferences {
    padding: 20rpx 30rpx 0 30rpx;
    .top {
      display: flex;
      align-items: center;

      .point {
        width: 18rpx;
        height: 18rpx;
        background-color: #e48139;
        border-radius: 50%;
      }

      .text {
        font-size: 30rpx;
        margin-left: 20rpx;
      }
    }

    .form-line {
      .title {
        color: #0e0454;
        line-height: 5vh;
        font-weight: bold;
      }
    }

    .select {
      margin-top: 20rpx;
    }

    .select-common {
      .custom {
        display: flex;
        justify-content: space-between;
        .arrow {
          width: 180rpx;
          text-align: right;
          padding-right: 35rpx;
        }
      }
    }

    .fit-relax {
      .fit-relax-content {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .fit-relax-text {
          color: #bab9c1;
        }
      }
    }
  }
</style>
